Two-Way Web Form Binding with Handlebars Bound View

Namespace: $GG.ui.web

Overview

The Gig Games Handlebars Bound View JavaScript library extends the core functionalities of the Gig Games platform by providing dynamic two way data-binding and templating capabilities using Handlebars.js. This documentation covers the $GG.web global object, detailing its public interface and usage guidelines.

Including in HTML

<head>
    ...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
    <script src="https://launch.gig.game/api/js?key={API_KEY_HERE}&libraries=web"></script>
    ...
</head>

Public $GG Web Global Object Interface

Classes

  • $$GG.web.type.HandlebarsBoundView
    • Description: Class to manage views with dynamic two way data-binding using Handlebars.js templates.
    • Constructor:
      • target (string, optional): The CSS selector of the target element where the template will be rendered. Defaults to "#app".
      • template (string, optional): The path to the Handlebars template file. Defaults to the class name followed by .html.
    • Methods:
      • render()
        • Description: Renders the template with the current view data.

Usage Example

index.html

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
    <script src="https://launch.gig.game/api/js?key={API_KEY_HERE}&libraries=web"></script>
    <script src="myview.js"></script>
</head>
<body>
    <div id='app'></div>
    <script>
		$(document).ready(function () {
			$GG.server.attachEvent("OnReady", () => {
				(new MyView("#app")).render();
			});
		});
    </script>
</body>
</html>

myview.js

class MyView extends $GG.web.types.HandlebarsBoundView {
    constructor(target) {
         super(target, "myview.html");
        this.name = '';
    }
    finish(data) {
        alert('Fini!')
	   console.log(data);
    }
}

myview.html

<div>
	<label for="person">Enter a Name</label>
	<input type="text" id="person" value="" placeholder="Enter any name" {{{bind 'base.name'}}}>
</div>
<div>
	Hello, my name is {{this.name}}
</div>
<div>
	<button type='button' {{{click 'finish' true}}}>Finish</button>
</div>

Notes

  • Handlebars.js must be included in your project separately for this library to function correctly.